import React, { useState, useEffect, useRef } from 'react'
import { Input, Select, Button, Modal } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setAdministrationCheck, setIsGroup, setLookList_Administration, } from '../../../store/module/store'
import { updateLable_all_ok, updateLable_all_no, getGroup, addGroupTag } from '../../../request/api'
import './Administration.css'
import Table1 from './Table1'
export default function Administration() {
  const dispatch = useDispatch()
  let is_group = useSelector((state: any) => state.storeList.is_group) //数据判断刷新
  let administrationCheck = useSelector((state: any) => state.storeList.administrationCheck)

  const [name, setName] = useState<string>('')
  const [tel, setTel] = useState<string>('')
  const [pickup, setPickup] = useState<string>('')
  const [address, setAddress] = useState<string>('')
  const [type, setType] = useState<string>('')
  const [label, setLabel] = useState<string>('')
  //下拉选择事件
  const handleChange = (value: string) => {
    setLabel(value)
  };

  const [labelList, setLabelList] = useState<string[]>([])
  useEffect(() => {
    get_group()
  }, [is_group])

  //获取分组列表
  const get_group = async () => {
    const res = await getGroup({})
    if (res.code == 200) {
      setLabelList(res.group_label)
      console.log(res.group_label);

    }
  }

  //批量通过
  const all_lable_ok = async () => {
    if (administrationCheck.length == 0) {
      alert('请选择数据')
    } else {
      let res = await updateLable_all_ok({ administrationCheck })
      if (res.code == 200) {
        get_group()
        dispatch(setAdministrationCheck([]))
      } else {
        alert('操作失败')
      }
    }
  }

  //批量作废
  const all_lable_no = async () => {
    if (administrationCheck.length == 0) {
      alert('请选择数据')
    } else {
      let res = await updateLable_all_no({ administrationCheck })
      if (res.code == 200) {
        get_group()
        dispatch(setAdministrationCheck([]))
      } else {
        alert('操作失败')
      }
    }
  }

  //检索
  const search = async () => {
    dispatch(setLookList_Administration({ list: { name, tel, pickup, address, type, label } }))
    dispatch(setIsGroup())
  }

  //重置
  const reset = () => {
    dispatch(setLookList_Administration({ list: {} }))
    setName('')
    setTel('')
    setPickup('')
    setAddress('')
    setType('')
    setLabel('')
    dispatch(setAdministrationCheck([]))
    dispatch(setIsGroup())

  }

  //添加团长标签
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [is_lable, setIs_lable] = useState([]);
  const up_Is_lable = (name: String) => {
    if (is_lable.includes(name)) {
      setIs_lable(is_lable.filter((item) => item != name))
    } else {
      setIs_lable([...is_lable, name])
    }
  }

  const showModal = () => {
    setIsModalOpen(true);
  };

  //取消团长标签
  const handleOk = () => {
    setIsModalOpen(false);
    setIs_lable([])
  };

  //添加团长标签
  const handleCancel = () => {
    setIsModalOpen(false);
    setIs_lable([])
    const res = addGroupTag({ administrationCheck: administrationCheck, is_lable: is_lable })
  };

  return (
    <div>
      <div className='all_top'>
        <div className='top'>
          <Input size="large" placeholder="请输入内容" prefix='姓名：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={name} onChange={(event) => {
              setName(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='电话：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={tel} onChange={(event) => {
              setTel(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='自提点名称：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={pickup} onChange={(event) => {
              setPickup(event.target.value)
            }} />
          <Input size="large" placeholder="请输入内容" prefix='地址：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={address} onChange={(event) => {
              setAddress(event.target.value)
            }} />
          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>自提点类型：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange}
              options={[
                { value: '全部', label: '' },
                { value: '便利店', label: '便利店' },
                { value: '快递驿站', label: '快递驿站' },
                { value: '杂货店', label: '杂货店' },
                { value: '水果/生鲜店', label: '水果/生鲜店' },
                { value: '其他', label: '其他' },
              ]}
            />
          </div>
          <div style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }}>
            <span style={{ marginLeft: '0.13rem' }}>团长标签：</span>
            <Select
              defaultValue="全部"
              style={{ width: '4rem', borderRadius: '0', fontSize: '0.22rem' }}
              onChange={handleChange}
              options={labelList.map(item => {
                return { value: item.name, label: item.name }
              })}
            />
          </div>
        </div>
        <div className='top2'>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              search()
            }}
          >检索</Button>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              reset()
            }}
          >重置</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              showModal()
            }}
          >添加标签</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              all_lable_ok()
            }}
          >有效</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              all_lable_no()
            }}
          >无效</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
          >导出</Button>
        </div>
      </div >
      <div className='table'>
        <Table1></Table1>
      </div>
      <div>
        <Modal title="添加标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={[
            <Button key="submit" onClick={handleOk}>
              取消
            </Button>,
            <Button key="back" type="primary" onClick={handleCancel}>
              确定
            </Button>
          ]}
        >
          {labelList.map(item => {
            return (
              <button key={item._id}
                style={{
                  padding: '0.1rem 0.2rem',
                  backgroundColor: '#fff',
                  border: is_lable.includes(item.name) ? '1px solid red' : '1px solid black',
                  margin: '0.1rem',
                  color: is_lable.includes(item.name) ? 'red' : 'black',
                }}
                onClick={() => {
                  up_Is_lable(item.name)
                }
                }
              >{item.name}</button>
            )
          })}
        </Modal>
      </div>
    </div>
  )
}


